"use client"

import { useState } from "react"
import { StatusBar } from "expo-status-bar"
import LoginScreen from "./src/screens/LoginScreen"
import BluetoothScreen from "./src/screens/BluetoothScreen"
import DashboardScreen from "./src/screens/DashboardScreen"
import TrainingScreen from "./src/screens/TrainingScreen"
import { DeviceInfoDisplay } from "./src/components/DeviceInfoDisplay"

export default function App() {
  const [currentScreen, setCurrentScreen] = useState<"login" | "bluetooth" | "dashboard" | "training">("login")
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [isConnected, setIsConnected] = useState(false)

  const handleLogin = () => {
    setIsLoggedIn(true)
    setCurrentScreen("bluetooth")
  }

  const handleConnect = () => {
    setIsConnected(true)
    setCurrentScreen("dashboard")
  }

  const handleStartTraining = () => {
    setCurrentScreen("training")
  }

  const handleBackToDashboard = () => {
    setCurrentScreen("dashboard")
  }

  const renderScreen = () => {
    switch (currentScreen) {
      case "login":
        return <LoginScreen onLogin={handleLogin} />
      case "bluetooth":
        return <BluetoothScreen onConnect={handleConnect} />
      case "dashboard":
        return <DashboardScreen onStartTraining={handleStartTraining} />
      case "training":
        return <TrainingScreen onBack={handleBackToDashboard} />
      default:
        return <LoginScreen onLogin={handleLogin} />
    }
  }

  return (
    <>
      <StatusBar style="dark" />
      {renderScreen()}
      <DeviceInfoDisplay />
    </>
  )
}
